

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layer-更懂你的web弹窗解决方案</title>

  <style>
  html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
  a,a:hover{ text-decoration:none;}
  pre{font-family:'微软雅黑'}
  .box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
  .box a{padding-right:15px;}
  #about_hide{display:none}
  .layer_text{background-color:#fff; padding:20px;}
  .layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
  .button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
  .photos-demo img{width:200px;}
  </style>
  
  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
<div class="box">
<pre>
 @Name：layer-v<script>document.write(layer.v)</script> 弹层组件说明
 @Author：贤心   <span id="gmt"> <h1>郭孟涛一起学习</h1></span>
 @Site：<a href="http://layer.layui.com/"  target="_blank">http://layer.layui.com/</a>


<strong>【注意事项】</strong>
一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
三、jquery需1.8+
四、更多使用说明与演示，请参见layer官网。
五、使用时请务必保留来源，请勿用于违反我国法律法规的web平台。
六、layer遵循MIT开源协议，将永久性提供无偿服务。
</pre>

//相册示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="" layer-src="tom.jpg" src="tom.jpg" alt="图片名" height="100px" >
  <img layer-pid="" layer-src="tom.jpg" src="wechat.jpg" alt="微信" height="100px">
</div>

//HTML示例
<div id="layer-photos-demo-tom" class="layer-photos-demo">
  <img layer-pid="图片id，可以不写" layer-src="tom.jpg" src="tom.jpg" alt="图片名" height="50px">
  <img layer-pid="图片id，可以不写" layer-src="wechat.jpg" src="wechat.jpg" alt="图片名" height="50px">
</div>

</div>

<div class="box" style="text-align:center">
  <a href="http://layer.layui.com/" target="_blank">更多示例</a>
  <a href="http://www.layui.com/doc/modules/layer.html" target="_blank">使用文档</a>
  <a href="http://fly.layui.com/" id="suggest">交流反馈</a>
  <a href="javascript:;" id="about">关于</a>
</div>



<script>
// ;!function(){

 
  //全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({
  // skin: 'layui-layer-lan'
})

//调用示例
layer.photos({
  photos: '#layer-photos-demo-tom'
  ,anim: 2 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});


var tom = "http://www.baidu.com";
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
layer.ready(function(){ 

 //调用示例
  layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
  ,tab: function(pic, layero){
    console.log(pic.alt) //当前图片的一些信息
  }
}); 



// $.getJSON('photos.json', function(json){
//   layer.photos({
//     photos: json
//     ,anim: 1//0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
//   });
// }); 


layer.tips('Hi', '#about', {tips: 1})

// layer.tips('Hd', '#about', {tips:  [1, 'green'],tipsMore: false}) 

 

 
  // layer.open({
  //   // skin: 'layui-layer-molv', //只对该层采用myskin皮肤
  //   type: 0,
  //   btn:['yes','no测试很多按钮','no测试很多按钮','no测试很多按钮','no测试很多按钮','no测试很多按钮','no测试很多按钮','no测试很多按钮'],
  //   title:'标题',
  //   maxmin: true,
  //   area: ['800px','700px'],
  //   offset:'',
  //   content: '123',
  //   btnAlign: 'l',
  //   closeBtn: 0,
  //   shade:  [0.8, '#000'],
  //   shadeClose:true,
  //   end: function(){
  //     layer.tips('Hi', '#about', {tips: 1})
  //   }
  // });


});

//关于
 

 //弹出一个页面层
  $('#about').on('click', function(){

  var tom=$.getJSON('photos.json', function(json){
    layer.photos({
      photos: json
      // ,anim: 3 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
      ,tab: function(pic, layero){
      console.log(pic.alt) //当前图片的一些信息
  }
    });
  });

console.log(tom);
    layer.open({
      type: 1,
      offset: [ //为了演示，随机坐标
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ] ,
      area: ['600px', '360px'],
      title: 'iframe父子操作',
      // shadeClose: true, //点击遮罩关闭
      shade:0,
      maxmin:true,
      id:'onlyone',
      content: 'tom.html'
      ,scrollbar: true
      ,btn: ['最大化', '全屏', '还原'] //可以无限个按钮
  //     ,success: function(layero, index){
  //        // console.log('666');
  //        // console.log(layero, index);
  //        // console.log(layero.html())
  //   var body = layer.getChildFrame('html', index);
  //   // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
  //   console.log(body.html()) //得到iframe页的body内容
  //   // console.log(body.text()) //得到iframe页的body内容
  //   // body.find('input').val('Hi，我是从父页来的')
  // }
  ,btn2: function(index, layero){
    //按钮【按钮三】的回调
    layer.full(index);
    // console.log(index);
    // return false; 开启该代码可禁止点击该按钮关闭

  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    layer.restore(index);
    // return false; 开启该代码可禁止点击该按钮关闭

  },
  yes: function(index, layero){

    // layer.full(index);
    layer.restore(index) ;
    //do something
    // layer.close(index); //如果设定了yes回调，需进行手工关闭
     // console.log(index);
     // layer.restore(index);
  }
    ,success: function(layero, index){

    //   console.log(layero.html());

    // var body = layer.getChildFrame('body', index);

    // console.log(body.text());

// layer.min(index);


    // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
    // console.log(body.html()) //得到iframe页的body内容
    // body.find('input').val('Hi，我是从父页来的');
    //假设这是iframe页
// var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
// parent.layer.close(index); //再执行关闭 

//假设这是iframe页
// var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
// parent.layer.close(index); //再执行关闭 
// layer.iframeSrc(index, 'http://sentsin.com');
// layer.iframeAuto(index) ;
// layer.iframeAuto(index) ;
// layer.iframeSrc(index, 'http://sentsin.com')

  }



    });


  });



// 弹出唯一
  // $('#about').on('click', function(){
  //   layer.open({
  //     type: 2,
  //     id: 'LAY_layuipro'+Math.random() ,//设定一个id，防止重复弹出
  //     // area: ['60px', '30px'],
  //     title: 'iframe父子操作',
  //     shade:0,
  //     offset: [ //为了演示，随机坐标
  //         Math.random()*($(window).height()-300)
  //         ,Math.random()*($(window).width()-390)
  //       ] ,
  //     // shadeClose: true, //点击遮罩关闭
  //     content: 'http://www.baidu.com'
  //   });
  // });
 //弹出一个loading层
  // $('#about').on('click', function(){
  //   var ii = layer.load();
  //   //此处用setTimeout演示ajax的回调
  //   setTimeout(function(){
  //     layer.close(ii);
  //   }, 1000);
  // });


  //弹出一个tips层
  // $('#about').on('click', function(){
  //   layer.tips('Hello tips!', '#about', {tips: 1});
  // });

// }();
</script>
</body>
</html>